<!--测点应用-->
<template>
  <div id="updateDialog">
    <el-dialog class="box" title="测点应用" :visible.sync="updateDialogShow" :before-close="handleClose">
      <div class="outlayout">
        <div class="topSearch">
          <el-input  placeholder=""></el-input>
          <i class="el-icon-search search"></i>
        </div>
        <div class="content">
          <el-tree
            show-checkbox
            :data="ztreeDataSource"
            :props="defaultProps"
            @check-change="handleCheckChange">
          </el-tree>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addApplictionData">保存</el-button>
        <el-button type="info" @click="handleClose" >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    props: {
      viewPoint: '',
      Pid: ''
    },
    components: {
    },
    data() {
      return {
        restatus: '更新',
        submitGroup: [],
        newdataarr: [],
        updateDialogFalse: false,
        pointRule: '',
        /**
         *  树 start
         * */
        ztreeDataSource: [],
        defaultProps: {
          children: 'children',
          label: 'name',
          isLeaf: 'leaf'
        },
        // 以下为接口
        submitdata: {
          access_token: localStorage.getItem('access_token'),
          type: 'resource_getall',
          pid: this.Pid,
          ids: []
        },
        // 添加测点应用
        submitaddPoint: {
          access_token: localStorage.getItem('access_token'),
          type: 'object_station_applyto',
          pid: this.Pid,
          applyto_des: [],
          data: {
            rule: ''
          }
        }
      }
    },
    created() {
      this.updateDialogShow = true
    },
    mounted() {
      this.queryData()
      console.log(this.viewPoint.rule)
    },
    methods: {
      // 子组件传值
      handleClose() {
        const dialogShow = this.updateDialogFalse // 所需要传的值
        this.$emit('giveFalse', dialogShow) // 传值的参数
      },
      handleCheckChange(data, checked, indeterminate) {
        var datas = []
        datas.push(data)
        this.newdataarr.push(datas)
        this.submitGroup = this.formArr(this.newdataarr)
      },
      // 从新组装cid 和 oid
      formArr(arr) {
        console.log(arr)
        var newarr = []
        for (let i = 0; i < arr.length; i++) {
          var obj = {}
          var def = arr[i]
          for (var j = 0; j < def.length; j++) {
            obj['oid'] = def[j]['oid']
            obj['cid'] = def[j]['cid']
            newarr.push(obj)
          }
        }
        return newarr
      },
      /*
    treeStart*/
      queryData() {
        // 资源树总览
        axios.post('/project', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.ztreeDataSource.push(res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      findById(data, parentId) {
        var vm = this

        for (var i = 0; i < data.length; i++) {
          if (parentId === data[i].id) {
            vm.dataList.push(data[i])
            vm.findById(vm.ztreeDataSource, data[i].parentId)
            return data[i]
          }

          if (data[i].hasOwnProperty('children')) {
            vm.findById(data[i].children, parentId)
          }
        }
      },
      // 点击节点
      nodeClick(m, parent, trees) {
        this.treeDeepCopy = trees
        this.nodeModel = m // 当前点击节点对象
        this.parentNodeModel = parent // 当前点击节点父亲对象

        // 导航菜单
        this.dataList = []
        this.findById(this.ztreeDataSource, m.parentId)
        this.dataList = this.dataList.reverse()
        this.dataList.push(m)
      },
      // 右击事件
      contextmenuClick(m) {
      },
      /*
      treeEnd*/
      addApplictionData() {
        // 添加应用
        this.submitaddPoint.applyto_des = this.submitGroup
        this.submitaddPoint.data.rule = this.viewPoint.rule
        axios.post('/project', this.submitaddPoint, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.errcode === '00000') {
            this.handleClose()
            this.restar()
            this.$message({
              type: 'success',
              message: '保存成功'
            })
          }
        })
          .catch(function(error) {
            this.$message({
              type: 'success',
              message: error
            })
          })
      },
      // 还原成功返回测点列表
      restar() {
        this.$emit('restars', this.restatus)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /*****************第一层弹窗*****************/
  .topSearch{
    width: 500px;
    height: 50px;
    margin-left: 10px;
  }
  .search{
    margin-top: -22px;
    position: absolute;
    margin-left: 475px;
    color: #0072F3;
  }
  /*****************第一层弹窗*****************/
  /deep/ .box > .el-dialog{
    width: 540px;
    min-height: 100px;
    max-height: 450px;
    overflow: auto;
    overflow-x: hidden;
    margin-top: 20vh !important;
    border-radius: 4px;
  }
  /*****************第一层弹窗头部*****************/
  /deep/ .box > .el-dialog > .el-dialog__header{
    width: 540px;
    height: 39px;
    line-height: 43px;
    padding: 0;
    text-indent: 20px;
    font-weight: bolder;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #e3e6ee;
  }
  /deep/ .box > .el-dialog > .el-dialog__header > .el-dialog__headerbtn{
    top: 12px;
  }
  /deep/ .box > .el-dialog > .el-dialog__header > .el-dialog__headerbtn > i{
    font-size: 18px;
    font-weight: bolder;
  }
  /*****************第一层弹窗内容*****************/
  /deep/ .box > .el-dialog > .el-dialog__body{
    padding: 1px 0 0 10px ;
    min-height: 200px;
    line-height: 30px;
    max-height: 250px;
    overflow: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  /deep/ .box > .el-dialog > .el-dialog__body > .el-form > .el-form-item{
    margin-bottom: 0;
  }
  /deep/ .box > .el-dialog > .el-dialog__body > .el-form > .el-form-item > .el-form-item__label{
    color: #69727E;
    font-weight: normal;
  }
  /deep/ .box > .el-dialog > .el-dialog__body > .el-form > .el-form-item > .el-form-item__content > .el-input > .el-input__inner{
    width: 610px;
    height: 30px;
  }
  /*****************第一层弹窗底部*****************/
  /deep/ .box > .el-dialog > .el-dialog__footer{
    border-top: 1px solid #e3e6ee;
  }
  /*****************底部按钮*****************/
  /deep/ .dialog-footer{
    width: 100%;
    /*padding-top: 8px;*/
  }
  /deep/ .dialog-footer > .el-button{
    width: 80px;
    height: 30px;
    padding: 0;
  }
  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 30px;
    line-height: 30px;
    outline: 0;
    padding: 0 27px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
</style>
